<template>
  <!-- 放置弹层组件 -->
  <!-- title 是对话框的标题
       visible 对话框绑定的布尔值
        @close 对话框的关闭
        @close="closeDialog"
       -->
  <el-dialog
    title="title"
    :visible="dialogVisible"
    width="50%"
    @close="closeDialog"
  >

    <!-- 表单⬇️ -->
    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <!-- el-option label属性是展示的文本 value属性是同步给select的v-model关联的值的 -->
          <!-- 此处这value绑定的是username字段，是接口设计的问题，真正开发中传递id才是对的 -->
          <el-option
            v-for="item in simpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" resize="none" />
      </el-form-item>
    </el-form>
    <!-- 表单⬆️ -->

    <!-- <el-dialo g title="添加部门" :visible="showDialog" @close="handleCloseDialog" /> -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import { reqGetEmployeeSimple } from '@/api/user'
import { reqAddDEpartment, reqGetDepartDetail, reqUpdateDepartments } from '@/api/departments'
export default {

  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    // 需要传入一个props变量来控制 显示或者隐藏
    dialogVisible: {
      type: Boolean,
      default: false // true // false
    },
    // 点击的部门的信息
    nodeData: {
      type: Object,
      required: true
    },
    // 接收原始部门列表数据
    deptsList: {
      type: Array,
      required: true
    }
  },

  data() {
    // 校验同级部门名称不重复的自定义校验规则
    const checkNameRepeat = (rule, value, cb) => {
      // 如果处于编辑状态，不校验部门名称
      if (this.form.id && value === this.nodeData.name) {
        return cb()
      }
      // let arr = []
      // // 如果处于编辑状态查找兄弟部门名称是否重复
      // if (this.form.id) {
      //   arr = this.deptsList.filter(item => item.pid === this.nodeData.pid)
      // } else {
      //   // 拿到当前部门的子部门列表的名称和value比较
      //   arr = this.nodeData.children
      // }
      // console.log(arr)

      // const boo = this.nodeData.children.some(item => item.name === value)
      // boo ? cb(new Error(`已存在${value}部门`)) : cb()

      // 所有部门存在的不能在添加
      const boo = this.deptsList.some(item => item.name === value)
      boo ? cb(new Error(`已存在${value}部门编码`)) : cb()
    }
    // 部门编码的自定义校验规则 不能与任何一个部门编码重复
    const checkCodeRepeat = (rule, value, cb) => {
      // 如果是编辑状态 不要进行部门编码的校验
      if (this.form.id && value === this.nodeData.code) {
        return cb()
      }

      const boo = this.deptsList.some(item => item.code === value)
      boo ? cb(new Error(`已存在${value}部门编码`)) : cb()
    }
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍

      },

      // 表单的验证
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: ['change', 'blur'] },
          { min: 2, max: 10, message: '部门名称必须在2-10字符之间', trigger: ['change', 'blur'] },
          { validator: checkNameRepeat, trigger: ['change', 'blur'] }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: ['change', 'blur'] },
          { min: 2, max: 10, message: '部门编码必须在2-10字符之间', trigger: ['change', 'blur'] },
          { validator: checkCodeRepeat, trigger: ['change', 'blur'] }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: ['change', 'blur'] },
          { min: 1, max: 300, message: '部门介绍必须在1-300字符之间', trigger: ['change', 'blur'] }
        ]
      },
      // 负责人列表
      simpleList: []
    }
  },
  created() {
    this.getSimpleList()
  },
  methods: {

    handleCloseDialog() {
    // 子传父
      this.$emit('close-dialog', false)
    },

    closeDialog() {
      // 对话框的关闭 x
      // resetFields方法对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.formRef.resetFields()
      // 通知父组件将dialogVisible改成false
      // this.$emit('update:dialogVisible', false)
      this.$emit('update:dialogVisible', false)
    },
    // 获取部门负责人列表
    async getSimpleList() {
      const { data } = await reqGetEmployeeSimple()
      this.simpleList = data
    },
    handleSubmit() {
      console.log('submit!')
      // 1.表单预校验
      this.$refs.formRef.validate(async boo => {
        if (boo) {
          // 只要处于编辑状态 form中是有id这个字段的
          if (this.form.id) {
            // 编辑提交的业务
            const { message } = await reqUpdateDepartments(this.form)
            this.$message.success(message)
          } else {
            // 2. 新增的业务
            const { message } = await reqAddDEpartment({ ...this.form, pid: this.nodeData.id })
            // 3. 提示用户
            this.$message.success(message)
          }
          // 4. 关闭弹出层
          this.closeDialog()
          // 5. 重新渲染
          this.$emit('reload')
        }
      })
    },
    // form对象赋值
    async EditshowDialog(nodeData) {
      this.loading = true
      // console.log(nodeData)
      // this.form = nodeData // 这样直接赋值欠妥
      // 这个方法应该 获取部门的信息 将获取回来的数据交给form对象
      // 发送请求 获取部门信息 ---- 明天来写

      const { data } = await reqGetDepartDetail(nodeData.id)
      // 将查询回来的信息同步给form
      this.form = data
      this.loading = false
    }
  }
}
</script>
